import React, { FC } from "react";
import generateConfig from "./generateConfig";
import { DatePicker } from "./Picker";
import { DateType, DayType } from "../type";
import { prefixCls } from "../constant";

export interface Props {
  selectedDate: [DateType, DateType];
  viewDate: DayType;
  handleSelectedDate: (newDate: [DateType, DateType]) => void;
  isChinese?: boolean;
}

const DateTimeRangeBody: FC<Props> = ({
  selectedDate,
  viewDate,
  handleSelectedDate,
  isChinese,
}) => {
  const onChange = (newValue: DateType) => {
    if (!newValue) {
      return;
    }
    const newDate = newValue?.startOf("day");
    const [startDate, endDate] = selectedDate;
    if (!startDate || !startDate.isSame(endDate)) {
      handleSelectedDate([newDate, newDate]);
      return;
    }
    if (newDate?.isBefore(startDate)) {
      handleSelectedDate([newDate, startDate?.clone()]);
      return;
    }
    handleSelectedDate([startDate, newDate]);
  };
  const props = {
    selectedDate,
    onChange,
    isChinese,
  };
  return (
    <div className={`${prefixCls}-container-body`} role="body">
      <DatePicker {...props} pickerValue={viewDate} />
      <DatePicker
        {...props}
        pickerValue={generateConfig.addMonth(viewDate, 1)}
      />
    </div>
  );
};

export default DateTimeRangeBody;
